@charset "utf-8";
/* 弹性盒子的封装 */

.flex-row {     /*设置主轴为水平方向*/
  display: flex;
  flex-direction: row;
}
.flex-col {     /*设置主轴为垂直方向*/
  display: flex;
  flex-direction: column;   
}
.j-c {        /*主轴上剩余空间: 项目居中显示*/
  justify-content: center;
}
.j-s-b {      /*主轴上剩余空间: 首尾紧靠弹性容器,中间均分*/
  justify-content: space-between;
}
.j-s-a {      /*主轴上剩余空间: 每个项目两侧均分*/
  justify-content: space-around;
}
.j-s-e {      /*主轴上剩余空间: 每个项目间距完全一样,包括与弹性容器间距*/
  justify-content: space-evenly;
}
 .a-c {       /*侧轴剩余空间: 即居中 */
  align-items: center;
}
.flex-1 {     /*弹性布局，内容被文字撑开,若子元素溢出，则自动显示纵向/横向滚动条*/
  flex: 1;
  overflow: auto;
}